<template>
  <div class="wrapper">
    <v-sidebar></v-sidebar>
    <div class="content-box" style="overflow-y: scroll;overflow-x:hidden;padding-bottom: 20px"
         :class="{'content-collapse':collapse}">
      <div :class="fixedHeader?'fixed-header':''">
        <v-head></v-head>
        <v-tags v-if="tagsView"></v-tags>
      </div>
      <div class="content"
           :style="fixedHeader&&tagsView?'position: absolute;top: 85px;':fixedHeader&&!tagsView?'position: absolute;top: 50px;':''">
        <router-view v-slot="{ Component,route }">
          <transition name="fade" mode="out-in" appear>
            <keep-alive :include="nameList">
              <component :is="Component" :key="route.fullPath"/>
            </keep-alive>
          </transition>
        </router-view>
        <right-panel>
          <settings/>
        </right-panel>
        <el-backtop target=".content"></el-backtop>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import vHead from './Header.vue';
import vSidebar from './Sidebar/Sidebar.vue';
import RightPanel from '@/components/RightPanel/index.vue';
import Settings from '@/components/Settings/index.vue';
import vTags from './Tags.vue';
import bus from 'vue3-eventbus';
import {ref, inject, reactive, onMounted, computed, watch} from 'vue';
import {useStore} from "vuex";
import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";

const store: any = useStore();
const route: any = useRoute()
const router: any = useRouter()
const tagsList: any = ref([])
const transitionName = ref('slide-left')
const collapse: any = ref(false);
const isname = ref(route.name)
const key = computed({
  get: () => route.path,
  set: (val) => {
  }
})
const tagsView = computed({
  get: () => store.state.settings.tagsView,
  set: (val) => {
  }
})
const fixedHeader = computed({
  get: () => store.state.settings.fixedHeader,
  set: (val) => {
  }
})
const nameList = computed({
  get: () => store.getters.nameList,
  set: (val) => {
  }
})

onMounted(() => {
  bus.on('collapse-content', msg => {
    collapse.value = msg;
  });
})

</script>


<style>

/*.fade-transform-leave-active, .fade-transform-enter-active {*/
/*  transition: all .5s;*/
/*}*/

/*.fade-transform-enter {*/
/*  opacity: 0;*/
/*  transform: translateX(-30px);*/

/*}*/

/*.fade-transform-leave-to {*/
/*  opacity: 0;*/
/*  transform: translateX(30px);*/
/*}*/


.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}


/* .fixed-header1{*/
/*  position: sticky;*/
/*  top: 0;*/
/*  right: 0;*/
/*  z-index: 9;*/
/*  width: calc(100% - 64px);*/
/*  -webkit-transition: width 0.025s;*/
/*  transition: width 0.05s;*/
/*}*/
.fixed-header {
  position: sticky;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  -webkit-transition: width 0.025s;
  transition: width 0.05s;
}

</style>

